<template>
	<view class="store-fishpond">
		<!-- 顶部导航 -->
		<view class="top">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="bgColor" :style="{ height: statusBarHeight}"></view>
			<!-- #endif -->
			<view class="header">
				<view class="head-menu" >
					<view class="iconfont icon-ic_leftarrow" @click="goback"></view>
					<view class="iconfont icon-ic_home" @click="goHome" ></view>
				</view>
			</view>
		</view>
		
		<!--鱼获-->
		<!-- <fishCatch :gapHeight="gapHeight" ref="childFish"></fishCatch> -->
		<!-- #ifdef MP || APP-PLUS -->
		<view class="container" :style="{marginTop:statusBarHeight,paddingTop:gapHeight}">
		<!-- #endif -->	
		<!-- #ifdef H5 -->
		<view class="container" style="margin-top: 40px;">
		<!-- #endif -->
			<fishCatch ref="childFish" :ticketInfo="ticketInfo" :isStar="isStar"  :ticketId="id" @startTicket="handleStartTicket" @stopTicket="handleStopTicket"></fishCatch>
		</view>
		
		<storeTabbar :value="2" :storeId = "storeID"></storeTabbar>
		<home></home>
	</view>
</template>

<script>
	import { getTicketInfo,startTicket,stopTicket } from '@/api/api.js';
	import storeTabbar from '../../../components/storeTabbar/storeTabbar.vue';
	import fishCatch from '@/components/fishCatch/index.vue'
	import home from '@/components/home';
	export default {
		components:{storeTabbar,fishCatch,home},
		data() {
			return {
				
				storeID:null, // 商铺id
				store: {}, // 商铺详情
				statusBarHeight: 0,
				// preview: false,
				gapHeight:"",
				id:null,//当前鱼票ID
				ticketInfo:{
					storeName:'--',
					countDown:null,
					duration:null,
					avatar:'',
					pitchOn:'',
					seat:'',
					sku:'',
					showConversionBtn:false,
					startTime:'',
					endTime:'',
					collect_weight:'',
					collect_quantity:'',
					integral:'',
					is_delayed:null,
				},
				// autoStart:false,
				isStar:6,//按钮状态 //1:开始垂钓 2：结束垂钓 3：摇号 4：选号 5：待回鱼 6:选择鱼票
				timer:null,//定时器
				interval:5000,//定时器间隔时间
			}
		},
		
		onLoad: function(options) {
			this.storeID = Number(options.storeID);
			if (!options.storeID) return this.$util.Tips({
				title: '缺少参数无法查看钓场垂钓信息'
			}, {
				tab: 1,
				url: '/pages/fishingPond/index'
			});
			// this.preview = options.time ? true : false;
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
		    this.gapHeight='40px';
			//this.$refs.childFish.socketConnect();
			
		},
		onShow() {
			let that = this
			let ticket_id = uni.getStorageSync('updateSelectId')
			that.id = Number(ticket_id)
			this.getTicketInfoData()
		},
		onHide() {
			clearInterval(this.timer)
		},
		/* onUnload() {
			this.$refs.childFish.socketClose();
		}, */
		methods: {
			//开始垂钓
			handleStartTicket(){
				let id = this.id
				let interval = this.interval
				startTicket(id).then(res=>{
					// this.ticketInfo.countDown = this.ticketInfo.duration
					this.getTicketInfoData()
					uni.$u.toast('已开始垂钓')
					/* this.timer = setInterval(()=>{
						this.getTicketInfoData()
					},interval) */
				})
			},
			//结束垂钓
			handleStopTicket(){
				let id = this.id
				stopTicket(id).then(res=>{
					uni.$u.toast('已结束垂钓')
					clearTimeout(this.timer)
					this.getTicketInfoData()
				})
			},
			goback() {
				// uni.navigateBack();
				uni.switchTab({
					url:'/pages/fishingPond/index'
				})
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			//进入鱼票购买详情页
			navTo(id){
				uni.navigateTo({
					url:'/pages/store/ticket_details/index?id='+id
				})
			},
			//获取钓票信息
			getTicketInfoData(){
				let id = this.id
				if(!id)return
				console.log(id);
				getTicketInfo(id).then(res=>{
					let {time_rule,partition_name,seat_name,planned_start_time,planned_end_time,settled_fish_weight,settled_fish_count,order_status,seat_mode,is_delayed,image,mer_name,store_name,ret_money,time_remaining} = res.data
					this.ticketInfo.avatar = image
					this.ticketInfo.storeName = mer_name
					this.ticketInfo.pitchOn = store_name
					this.ticketInfo.seat = partition_name + seat_name
					this.ticketInfo.sku = time_rule.sku
					this.ticketInfo.startTime = planned_start_time === null?'':planned_start_time
					this.ticketInfo.endTime = planned_end_time === null?'':planned_end_time
					this.ticketInfo.collect_weight = settled_fish_weight
					this.ticketInfo.collect_quantity = settled_fish_count
					this.ticketInfo.integral = ret_money
					this.ticketInfo.is_delayed = is_delayed
					this.ticketInfo.duration= time_rule.duration *1000
					this.ticketInfo.countDown = time_remaining *1000
					//底部按钮状态
					switch (order_status){
						case 10:
							//还未选位
							//手动选位
							if(seat_mode === 0)this.isStar = 4
							//摇号选位
							if(seat_mode === 1)this.isStar = 3
							break;
						case 21:
							//已选完，可以开始垂钓
							this.isStar = 1
							break;
						case 41:
							//启动垂钓中
							this.isStar = 2
							break;
						case 51:
							//已结束垂钓，待回鱼
							this.isStar = 5
							break;
						default:
							break;
					}
					clearInterval(this.timer)
					if(order_status == 21 ||order_status == 41 || order_status == 51){
						// 如果是绑定钓位成功、启动垂钓成功、待回鱼状态，则间隔一段时间向服务器请求最新数据
						let interval = this.interval
						this.timer = setInterval(()=>{
							this.getTicketInfoData()
						},interval)
					}else if(order_status == 70){
						//如果订单结束，则情况当前页面数据，状态为选票
						uni.removeStorageSync("updateSelectId");
						this.reset()
					}
				})
			},
			//重置
			reset(){
				this.ticketInfo = {
					storeName:'--',
					countDown:null,
					duration:null,
					avatar:'',
					pitchOn:'',
					seat:'',
					sku:'',
					showConversionBtn:false,
					startTime:'',
					endTime:'',
					collect_weight:'',
					collect_quantity:'',
					integral:'',
					is_delayed:null,
				}
				this.isStar = 6
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f6f7f9;
	}
	.store-fishpond {
		/* position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		padding-bottom: 100rpx;
		padding-bottom: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		background: left top/750rpx 390rpx no-repeat fixed;
		overflow: hidden;
		touch-action: none; */
		.top{
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 1000;
			background: #549CE3;
			.bgColor{
				background: #549CE3;
			}
			.header {
				position: relative;
				z-index: 6;
				display: flex;
				align-items: center;
				padding-right: 34rpx;
				height: 43px;
				padding-left: 33rpx;
				// background: #549CE3;
				.head-menu {
					display: -webkit-box;
					display: -webkit-flex;
					display: flex;
					-webkit-box-align: center;
					-webkit-align-items: center;
					align-items: center;
					height: 27px;
					width: 70px;
					background: rgba(255,255,255,.8);
					border-radius: 13px;
					.icon-ic_leftarrow {
						font-size: 32rpx;
						color: #333333 !important;
					}
					.iconfont {
						-webkit-box-flex: 1;
						-webkit-flex: 1;
						flex: 1;
						text-align: center;
						color: #000000 !important;
						box-sizing: border-box;
						&.icon-ic_leftarrow {
							border-right: 1px solid rgba(000,000,000,.2) !important;
						}
					}
				}
			}
		}
		.container{
			// margin-top: 43px;
		}
	}
	
	
</style>
